<template>
  <div class="p-3 bg-gray-100">
    <uni-forms ref="form" :modelValue="formData" label-position="top" :rules="rules" label-width="40">
      <div class="card">
        <uni-forms-item label="用工需求" required name="title">
          <uni-easyinput prefixIcon="input" v-model="formData.title" placeholder="请输入用工需求"></uni-easyinput>
        </uni-forms-item>
        <uni-forms-item label="用工人数" required name="headCount">
          <uni-number-box :min="0" v-model="formData.headCount"></uni-number-box>
        </uni-forms-item>
        <uni-forms-item label="工期(天)" required name="workTime">
          <uni-number-box :min="0" v-model="formData.workTime" :step="0.5"></uni-number-box>
        </uni-forms-item>
        <uni-forms-item label="开始时间" required name="startTime">
          <uni-datetime-picker type="date" return-type="timestamp" v-model="formData.startTime" />
        </uni-forms-item>
      </div>

      <div class="card mt-2">
        <uni-forms-item label="预备物料" name="preparations">
          <uni-easyinput prefixIcon="input" type="textarea" v-model="formData.preparations"
            placeholder="输入预备物料"></uni-easyinput>
        </uni-forms-item>
        <uni-forms-item label="物料总价" name="preparationsPrice">
          <div class="flex items-center gap-2">
            ￥<uni-easyinput prefixIcon="input" v-model="formData.preparationsPrice"
              placeholder="请输入用工需求"></uni-easyinput>元
          </div>
        </uni-forms-item>
        <uni-forms-item label="工钱" name="price">
          <div class="flex items-center gap-2">
            ￥<uni-easyinput prefixIcon="input" v-model="formData.price" placeholder="感谢费全部归属师傅，师傅接单更积极"></uni-easyinput>元
          </div>
        </uni-forms-item>
      </div>

      <div class="card mt-2">
        <uni-forms-item label="手机号码" name="phone" required>
          <uni-easyinput prefixIcon="input" v-model="formData.phone" placeholder="输入有效手机号"></uni-easyinput>
        </uni-forms-item>
        <uni-forms-item name="area" class="w-full" label="所在地区">
          <picker class="pickerList flex-1 bg-gray-100 p-2 rounded-md" mode="multiSelector" :range="newProvinceDataList"
            :value="multiIndex" @change="pickerChange" @columnchange="pickerColumnchange">
            {{
              formData.area
            }}
          </picker>
        </uni-forms-item>
        <uni-forms-item label="详细地址" name="location">
          <uni-easyinput prefixIcon="input" v-model="formData.location" placeholder="请填写详细地址"></uni-easyinput>
        </uni-forms-item>
        <uni-forms-item label="事项描述" required name="requirements">
          <uni-easyinput prefixIcon="input" type="textarea" v-model="formData.requirements"
            placeholder="请输入详细描述"></uni-easyinput>
        </uni-forms-item>
      </div>

    </uni-forms>
    <button class="mt-4" type="primary" @click="submit">发出</button>
  </div>
</template>


<script>
import { provinceData } from '../../static/data/provinceData.js';
import useLogin from '../../composables/login'
export default {
  data() {
    return {
      oldProvinceDataList: provinceData.data,
      newProvinceDataList: [
        [], [], []
      ],
      multiIndex: [0, 0, 0],
      formData: {
        title: '',
        requirements: '',
        headCount: 0,
        workTime: 0,
        startTime: "",
        preparationsPrice: 0,
        preparations: '',
        price: 0,
        area: '请选择地区',
        location: '',
        phone: ''
      },
      rules: {
        //对title字段进行验证
        title: {
          rules: [{
            required: true,
            errorMessage: '请输入事件描述',
          }]
        },

        //对requirements字段进行验证
        requirements: {
          rules: [{
            required: true,
            errorMessage: '请输入事件描述!',
          }]
        },

        //对headCount字段进行验证
        headCount: {
          rules: [
            {
              validateFunction: function (rule, value, data, callback) {
                if (value == 0) {
                  callback('请输入用工人数');
                }
              }
            },
          ]
        },

        //对workTime字段进行验证
        workTime: {
          rules: [
            {
              validateFunction: function (rule, value, data, callback) {
                if (value == 0) {
                  callback('请输入工期（天）');
                }
              }
            },
          ]
        },

        //对startTime字段进行验证
        startTime: {
          rules: [
            {
              validateFunction: function (rule, value, data, callback) {
                if (value == "2023-02-26") {
                  callback('请选择工作日期');
                }
              }
            }
          ]
        },

        //对preparationsPrice字段进行验证
        preparationsPrice: {
          rules: [
            {
              format: 'number',
              errorMessage: '感谢费只能输入数字',
            },
          ]
        },

        //对preparations字段进行验证
        preparations: {
          rules: [{
            required: true,
            errorMessage: '输入预备物料!',
          }]
        },


        price: {
          rules: [{
            required: true,
            errorMessage: '输入感谢费',
          },
          {
            format: 'number',
            errorMessage: '感谢费只能输入数字',
          },]
        },

        //对phone字段进行验证
        phone: {
          rules: [{
            required: true,
            errorMessage: '输入联系手机号码',
          }, {
            minLength: 11,
            maxLength: 11,
            errorMessage: '手机号为 11 位',
          }]
        },

        //对area字段进行验证
        area: {
          rules: [
            {
              validateFunction: function (rule, value, data, callback) {
                if (value == '请选择地区') {
                  callback('请选择地区');
                }
              }
            }
          ]
        },

        //对location进行验证
        location: {
          rules: [{
            required: true,
            errorMessage: '请输入详细地址',
          },
          ]
        },

        //对phone字段进行验证
        phone: {
          rules: [{
            required: true,
            errorMessage: '请输入有效手机号码',
          },
          {
            validateFunction: function (rule, value, data, callback) {
              let iphoneReg = (
                /^(13[0-9]|14[1579]|15[0-3,5-9]|16[6]|17[0123456789]|18[0-9]|19[89])\d{8}$/
              ); //手机号码
              if (!iphoneReg.test(value)) {
                callback('手机号码格式不正确，请重新填写')
              }
            }
          }
          ]
        },
      }
    }
  },
  setup() {
    if (!uni.getStorageSync('token')) { //没登录则跳出提示
      uni.showModal({
        title: '请登录',
        success: ({ confirm, cancel }) => {
          if (confirm) {
            useLogin()
          } else if (cancel) {
            uni.redirectTo({ url: '/pages/index/index' })
          }
        }
      })
    }
  },
  onLoad() {

    for (let i = 0; i < this.oldProvinceDataList.length; i++) {
      this.newProvinceDataList[0].push(this.oldProvinceDataList[i].name);
    }
    for (let i = 0; i < this.oldProvinceDataList[0].city.length; i++) {
      this.newProvinceDataList[1].push(this.oldProvinceDataList[0].city[i].name);
    }
    for (let i = 0; i < this.oldProvinceDataList[0].city[0].area.length; i++) {
      this.newProvinceDataList[2].push(this.oldProvinceDataList[0].city[0].area[i]);
    }
  },
  methods: {
    submit() {
      this.$refs.form.validate()
        .then(formData => {

          uni.navigateTo({
            url: "/pages/confirm/confirm?data=" + JSON.stringify(formData)
          })
        })
        .catch(err => {
          console.log('表单错误信息：', err);
        })
    },
    //选择地区
    // 省市区确认事件
    pickerChange(e) {
      this.multiIndex = e.detail.value;
      this.formData.area = `${this.newProvinceDataList[0][this.multiIndex[0]]}--${this.newProvinceDataList[1][this.multiIndex[1]]}--${this.newProvinceDataList[2][this.multiIndex[2]]}`
    },
    pickerColumnchange(e) {
      if (e.detail.column === 0) {
        this.multiIndex[0] = e.detail.value
        this.newProvinceDataList[1] = this.oldProvinceDataList[this.multiIndex[0]].city.map((item, index) => {
          return item.name
        })
        if (this.oldProvinceDataList[this.multiIndex[0]].city.length === 1) {
          this.newProvinceDataList[2] = this.oldProvinceDataList[this.multiIndex[0]].city[0].area.map((item, index) => {
            return item
          })
        } else {
          this.newProvinceDataList[2] = this.oldProvinceDataList[this.multiIndex[0]].city[this.multiIndex[1]].area.map((item, index) => {
            return item
          })
        }
        this.multiIndex.splice(1, 1, 0)
        this.multiIndex.splice(2, 1, 0)
      }
      if (e.detail.column === 1) {
        this.multiIndex[1] = e.detail.value
        this.newProvinceDataList[2] = this.oldProvinceDataList[this.multiIndex[0]].city[this.multiIndex[1]].area.map((item, index) => {
          return item
        })
        this.multiIndex.splice(2, 1, 0)
      }
      if (e.detail.column === 2) {
        this.multiIndex[2] = e.detail.value
      }
    },
  }
}
</script>


<style scoped>
.card {
  @apply bg-white p-2 rounded-lg px-4
}
</style>